<script lang="ts" setup>
    import { ref, reactive, PropType, watch } from 'vue';
    import {IconCaretDown} from '@arco-design/web-vue/es/icon';
    import {INDEXDATEMODE, COMPAREVALUE, Priod} from '@/constants/indexTree'
    import _ from 'lodash'
    import TimeSelect from '../TimeSelect/index.vue'
    const props = defineProps({
        indexCompare: {
            type: Object as PropType<any>
        }
    })
    const indexCompareVisible = ref<boolean>(false)
    const timeTips = ref<boolean>(false)

    const emit = defineEmits(['indexConfigSuccess'])
    const openIndexCompare = () => {
        indexCompareVisible.value = true
    }
    const defalutForm = {
        compareName: '',
        compareType: '',
        dateCondition: {
            dateMode: '',
            offset: undefined,
            fixDate: undefined,
            timeUnit: ''
        }
    }
    const indexCompareForm = ref<any>()


    const formCompareRef = ref();
    const onOk = async () => {
        timeTips.value = true
        if ((!indexCompareForm.value.dateCondition.fixDate &&
            !indexCompareForm.value.dateCondition.offset)) {
                //  timeTips.value = false
                 return
            }
        
        const err = await formCompareRef.value.validate();
        if (!err) {
            indexCompareVisible.value = false
            emit('indexConfigSuccess', indexCompareForm.value)
        }
    }
    const changeNumber = (v:any) => {
        if (v) {
            timeTips.value = false
        }
    }
    const styleWidth = ref('w130')
    const pickerWidth = ref('w132')
    const handleChangeDateMode = (v:any) => {
        indexCompareForm.value.dateCondition.offset = undefined
        indexCompareForm.value.dateCondition.fixDate = ''
    }
    watch(
        () => props.indexCompare,
        (val) => {
            indexCompareForm.value = _.cloneDeep(val)
        },
        {
            immediate: true,
            deep:true
        }
    )
    defineExpose({
        openIndexCompare
    })

</script>

<template>

    <a-modal 
        :visible="indexCompareVisible" 
        titleAlign = "start"
        :unmountOnClose="true"
        :maskClosable="false"
        title="指标对比配置"
        width="460px"
        modal-class="index-compare-config"
        @ok="onOk"
        @cancel="
            () => {
                indexCompareVisible = false
                timeTips = false
            }
        "
        @close="
            () => {
                indexCompareVisible = false
                timeTips = false
            }
        "
    >
    <div class="content">
      <a-form ref="formCompareRef" :model="indexCompareForm" auto-label-width>
        <a-form-item
          show-colon
          label="对比项名称"
          field="compareName"
          :rules="[{ required: true, message: '请输入对比项名称' }]"
        >
          <a-input 
            v-model="indexCompareForm.compareName" 
            placeholder="请输入" 
            style="width: 264px;"
          />
        </a-form-item>

        <a-form-item>
          <template #label>
            <span class="col_red mr-4">*</span>
            <span>对比项时间点 :</span>
          </template>
          <TimeSelect 
            :styleWidth="styleWidth"
            :pickerWidth="pickerWidth"
            compareTimeText="前"
            v-model="indexCompareForm"
            @changeNumber="changeNumber"
            :timeTypeoption="INDEXDATEMODE"
            @handleChangeDateMode="handleChangeDateMode"
            size="medium"

          />
        </a-form-item>
            <p class="col_red timetips"  v-show="timeTips && 
            (!indexCompareForm.dateCondition.fixDate &&
            !indexCompareForm.dateCondition.offset)">请选择对比时间点</p>
        <a-form-item
            field="compareType"
            :rules="[{ required: true, message: '请选择对比值' }]"
        >
          <template #label>
            <!-- <span class="col_red mr-4">*</span> -->
            <span>对比值 :</span>
          </template>
          <ASelect
            v-model="indexCompareForm.compareType"
            :options="COMPAREVALUE"
            placeholder="请输入"
            style="width: 264px;"
          >
            <template #arrow-icon>
                <icon-caret-down />
            </template>
          </ASelect>
        </a-form-item>

       
      </a-form>
    </div>
    </a-modal>

</template>

<style>
    .index-compare-config .arco-modal-body{
        padding: 18px 20px 0px;
    }
</style>
<style scoped>
.timetips {
    margin: -18px 0 0px 120px;
}
.index-compare-config .arco-input-number-mode-embed .arco-input-number-step {
    opacity: 1;
}
</style>